“Hello, New Relic!” 基礎中の基礎が学べるハンズオンをやってみた #newrelic

無償の公式ハンズオンで APM や Browser、Synthetics、NRQL など New Relic の基本的な使い方を学びました。APM を始めたい開発者は当然ながら、なかなかコードをさわる機会のないインフラエンジニアのためとも言える素敵なハンズオンをレポートします

#New Relic

渡辺聖剛

2021.12.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

本記事は New Relic Advent Calendar 2021 の 17 日目の記事です。

New Relic が公開しているトレーニングサイト、New Relic University (NRU) には、ウェビナーやハンズオンなど多くのコンテンツが収められています。

その中で今回、「New Relic 最初の一歩」ともいえそうなハンズオン「Hello, New Relic!」をやってみたので、その冒頭部分だけレポートします。

[Hands-on Lab] Hello, New Relic!

何が学べる？

「Hello, New Relic!」は以下の 5 つの Lab で構成されていて、New Relic の基本を順に学んでいくことができます。

Lab 1: Instrumenting with Agents
- ハンズオン環境（EC サイトのテストアプリ）を Glitch.com 上に立ち上げ、New Relic APM と Browser (RUM) を組み込む
Lab 2: Exploring Your Data with NRQL
- 上記アプリから収集されたデータを NRQL（検索言語）を使って検索、ダッシュボード作成
Lab 3: Custom Instrumentation
- ビジネス KPI などのカスタムメトリクスを組み込み可視化
Lab 4: Alerting Best Practices
- SLO ダッシュボードを作成しアラートを仕込む
Lab 5: True Availability Using Synthetics
- 「料理の注文をする」という一連の流れを Synthetics で監視

いわゆる「Hello World」が APM、というところに、New Relic の本質が出ていますね！
インフラエンジニア出身の身としては、つい「New Relic Infrastructure を設定してメトリックを〜」と考えてしまいがちなので、アプリケーション中心のハンズオンは助かります。

ちなみに本ハンズオン（というか NRU 全体）は英語のみのコンテンツなのですが、あまり難しい言い回しなどは出てこないのと、動画と文章の両方で手順を説明してくれるので、Google 翻訳や DeepL などの翻訳アプリ片手に進めていけるかと思います。

実行環境：Glitch.com

上述していますが、このハンズオンは Glitch 上で実行します。
ぼくはこのサービスの存在をこれで知ったのですが、オンライン IDE と実行環境が無料でも使えてしまうという、とても素敵なサービスでした。

ただし、無料アカウント（Free プラン）では以下の制限があります。とはいえハンズオン環境としては十分以上ですね！

プロジェクトとそのコードは public 状態で、誰でも検索可能
- その場合でも一部、API キーなどの機密情報などが記述できるファイルは非公開
Web アプリケーションは実行後 5 分でスリープされる
- 静的コンテンツは常時アクセス可能

準備

ハンズオンを開始する前に、以下の二つのアカウントを準備しておきましょう。まだ持っていなければ、両方とも無料で開始できます。

Glitch
New Relic

Glitch ですが、Firefox ではコンテクストメニューが表示されないなど不安定なところが見られたので、Chrome ブラウザを使うとよさそうです。¹

また、New Relic の API キー（ライセンスキー）も必要になりますので、以下のドキュメントを参照しつつ用意しておきましょう。Lab 1 の動画でも手順が説明されています。

New Relic ライセンスキー | New Relic Documentation

ちなみに、New Relic University は New Relic アカウントでサインインが可能です。
サインインしておくと履歴が残り、あとから何を受講したか分かる様になるため、ハンズオンを始める前にやっておきましょう。

Lab 1: Instrumenting with Agents

では実際に手順を進んでいきたいと思います。 Lab 1 は、以下のステップに分かれています（以後も似たような感じで進んでいきます）。

動画を見る
LAB 1: FoodMe を実行
LAB 2: Deploying the Browser Agent を実行

Lab の中に LAB があるの、ちょっと分かりにくいですね！
でも慣れれば大したことはないので、そういうものということでそのまま進んでいきましょう。

ちなみに Lab のほうは Lesson と呼ばれていることもあるので、この二つは単なる表記揺れという理解でいいと思います。

LAB 1: FoodMe App

LAB 1 の手順は以下のとおりです：

Glitch のアカウントを用意（済み）
用意した Glitch アカウントにテストアプリのコード群を複製
コード内のファイル .env を編集して New Relic ライセンスキーを埋め込む
ファイル package.json を修正し New Relic 上で参照するアプリケーション名（ FoodMe ）をセット
テストアプリにブラウザでアクセス
テストアプリを操作してみる --> 計測データが New Relic に送信されることを確認

2.については、手順に記載されている URL を踏むことで自動的に clone されます。適当なプロジェクト名が自動的に付けられるので、一瞬分からなくなりますが、そういうものと思ってください。
もちろん後から変更が可能ですが、既に Glitch 上に存在している名前と重複はできない仕様みたいです。

プロジェクトを開くとこんな感じで、実際の実行画面を右側で見つつ、左側でコードをいじることが可能です。

さっそく.envファイルを修正し、ライセンスキーを書き込んでみましょう（ステップ 3.）。
ちなみに前述しましたが、このファイルに書き込まれたデータは非公開となるのでご安心ください。

4.は、見たところ既に FoodMe に書き換わっているのでそのまま手を付けず。Glitch の右側に表示されている FoodMe の画面で、適当に注文してみます。

最終的に「Purchase」をクリックしたら、New Relic の画面の方を見てみましょう。

何かしらデータが飛んできてますね！
現時点で、FoodMe アプリのサーバアプリケーション側の動作が New Relic で追えるようになっているはずです。²

LAB 2: Deploying the Browser Agent

このままいろいろ見て回ってもいいんですが、途中なので先に進みましょう。続いて LAB 2 に進みます。
手順に従ってリアルユーザーモニタリング（RUM）のための Browser Agent （JavaScript スニペット）を仕込みましょう。これで、購入者のブラウザで動作している JavaScript の動作も併せて追えるようになるはずです。

+ Add more data をクリックし、 Browser metrics > New relic Browserをクリックし、プルダウンメニューで New Relic のアカウントを選択します。
動画とはちょっと UI が変わっているのですが、まず「Copy/Paste Javascript code」ラジオボタンを選択し、